<template>
  <p style="width: 2000px; height: 3000px"></p>
  <div class="contClass">
    <div>scrollX:{{ scrollX }}</div>
    <div>scrollY:{{ scrollY }}</div>
    <div>mouseX:{{ mouseX }}</div>
    <div>mouseY:{{ mouseY }}</div>
  </div>
</template>

<script setup>
import { useMouse, useScroll, useTitle, useStoreRage } from "../hooks";
const Title = useTitle();
setTimeout(() => {
  Title.value = "coder";
}, 2000);
const { scrollX, scrollY } = useScroll();
const { mouseX, mouseY } = useMouse();
const storage = useStoreRage("name",'小明');
setTimeout(() => {
  storage.value = "小辉";
},2000);
</script>

<style scoped>
.contClass {
  position: fixed;
  right: 50px;
  bottom: 50px;
}
</style>
